<template>
  <section id="hero">
    <v-img
      :min-height="minHeight"
      :src="require('@/assets/bg.jpg')"
      class="white--text"
      gradient="to right, rgba(5, 11, 31, .5), rgba(5, 11, 31, .5)"
    >
      <v-container class="fill-height px-4 py-12">
        <v-responsive
          class="d-flex align-center"
          height="100%"
          max-width="700"
          width="100%"
        >
          <base-heading title="GTAFingerPrinter" />

          <base-body>
            全新3.0版本，支持所有分辨率，支持窗口化、无边框和全屏模式，新增连点功能，拿黄金不再手软
          </base-body>

          <div
            :class="$vuetify.breakpoint.smAndDown ? 'flex-column align-start' : 'align-center'"
            class="d-flex flex-wrap"
          >
            <base-btn href="https://wwa.lanzous.com/iYRere1kfaf">
              立即下载
            </base-btn>

            <span class="font-weight-bold ml-6 mr-4 my-4">或</span>

            <base-btn
              :ripple="false"
              class="pa-1"
              height="auto"
              text
              href="https://gitee.com/fissssssh/GTAFingerprinter"
            >
              查看源码
            </base-btn>
          </div>
        </v-responsive>
      </v-container>
    </v-img>
  </section>
</template>

<script>
  export default {
    name: 'SectionHero',

    provide: {
      theme: { isDark: true },
    },

    computed: {
      minHeight () {
        const height = this.$vuetify.breakpoint.mdAndUp ? '100vh' : '50vh'

        return `calc(${height} - ${this.$vuetify.application.top}px)`
      },
    },
  }
</script>
